<%@ page import="com.ws.lv.util.Res" %><%--
  Created by IntelliJ IDEA.
  User: Adminis
  Date: 2025/3/19
  Time: 11:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page import="com.ws.lv.util.Res" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>统计图</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script> <!-- 添加 chartjs-plugin-datalabels 库 -->
    <style>
        .chart-container {
            width: 43%; /* 调整容器宽度 */
            margin: auto;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">统计图</h1>
<div class="chart-container">
    <canvas id="barChart" width="400" height="200"></canvas>
</div>
<p></p>
<div class="chart-container">
    <canvas id="lineChart" width="400" height="200"></canvas>
</div>
<p></p>
<div class="chart-container">
    <canvas id="pieChart" width="100" height="100"></canvas>
</div>

<script>
    // 发起 AJAX 请求获取真实数据 柱状图
    fetch('${pageContext.request.contextPath}/adminpage/typeRoutes')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            console.log('Data received:', data); // 添加调试信息
            const labels = data.typeNames;
            const salesData = data.typeRoutes;
            console.log(labels);

            // 检查数据是否正确
            if (!labels || !salesData || labels.length !== salesData.length) {
                console.error('Data mismatch:', labels, salesData);
                return;
            }

            // 柱状图数据
            var barChartData = {
                labels: labels,
                datasets: [{
                    label: '各类类别线路的数量',
                    data: salesData,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(255, 99, 132, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(255, 99, 132, 1)'
                    ],
                    borderWidth: 1,
                    // 添加一些好看的样式
                    borderRadius: 10,
                    borderSkipped: false,
                    hoverBackgroundColor: [
                        'rgba(255, 99, 132, 0.5)',
                        'rgba(54, 162, 235, 0.5)',
                        'rgba(255, 206, 86, 0.5)',
                        'rgba(75, 192, 192, 0.5)',
                        'rgba(153, 102, 255, 0.5)',
                        'rgba(255, 159, 64, 0.5)',
                        'rgba(255, 99, 132, 0.5)'
                    ],
                    hoverBorderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(255, 99, 132, 1)'
                    ]

                }]
            };


            // 创建柱状图
            var barCtx = document.getElementById('barChart').getContext('2d');
            var barChart = new Chart(barCtx, {
                type: 'bar',
                data: barChartData,
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

        })


    // 发起 AJAX 请求获取真实数据 折线图
    fetch('${pageContext.request.contextPath}/adminpage/supplierRoutes')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            console.log('Data received:', data); // 添加调试信息
            const labels = data.supplierNames;
            const salesData = data.supplierRoutes;
            console.log(labels);

            // 检查数据是否正确
            if (!labels || !salesData || labels.length !== salesData.length) {
                console.error('Data mismatch:', labels, salesData);
                return;
            }

            // 折线图数据
            var lineChartData = {
                labels: labels,
                datasets: [{
                    label: '各个供应商线路数量',
                    data: salesData,
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            };


            // 创建折线图
            var lineCtx = document.getElementById('lineChart').getContext('2d');
            var lineChart = new Chart(lineCtx, {
                type: 'line',
                data: lineChartData,
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

        })


    // 发起 AJAX 请求获取真实数据 饼图
    fetch('${pageContext.request.contextPath}/adminpage/saveTypeRoutes')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json();
        })
        .then(data => {
            console.log('Data received:', data); // 添加调试信息
            const labels = data.typeNames;
            const salesData = data.saveTypeRoutes;
            console.log(labels);

            // 检查数据是否正确
            if (!labels || !salesData || labels.length !== salesData.length) {
                console.error('Data mismatch:', labels, salesData);
                return;
            }

            // 饼状图数据
            var pieChartData = {
                labels: labels,
                datasets: [{
                    label: '各个类别线路收藏量',
                    data: salesData,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)',
                        'rgba(255, 99, 132, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)',
                        'rgba(255, 99, 132, 1)'
                    ],
                    borderWidth: 1
                }]
            };

            // 创建饼状图
            var pieCtx = document.getElementById('pieChart').getContext('2d');
            var pieChart = new Chart(pieCtx, {
                type: 'pie',
                data: pieChartData
            });
        })

        .catch(error => console.error('Error fetching data:', error));
</script>


</body>
</html>